<template>
  <div class="app-container">
    <a-row :gutter="24">
      <!-- 组织列表 -->
      <a-col :xs="24" :sm="24" :lg="6">
        <UnitTree ref="unitTree" :ancestors="ancestorsProvider" :ancestorsOther="ancestorsServicer" @unitNodeClick="unitNodeClick"></UnitTree>
      </a-col>

      <!-- 管理列表 -->
      <a-col :xs="24" :sm="24" :lg="18">
        <a-tabs v-model="tabActive">
          <a-tab-pane tab="用户管理" key="1">
            <UserTable ref="userTable" :ancestors="ancestorsProvider" roleKey="provider"></UserTable>
          </a-tab-pane>
          <a-tab-pane tab="关联运维商" key="2">
            <UnitTable ref="unitTable" :ancestors="ancestorsServicer"></UnitTable>
          </a-tab-pane>
          <a-tab-pane tab="运维合同" key="3">
            <ProjectTable ref="projectTable" :ancestorsServicer="ancestorsServicer" :ancestorsProvider="ancestorsProvider" :showUnitSearch="false">
            </ProjectTable>
          </a-tab-pane>
        </a-tabs>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import UnitTree from "../UnitTree.vue";
  import UserTable from "../UserTable.vue";
  import UnitTable from "../UnitTable.vue";
  import ProjectTable from "../ProjectTable.vue";

  export default {
    name: "Servicer",
    components: {
      UnitTree,
      UserTable,
      UnitTable,
      ProjectTable
    },
    data() {
      return {
        tabActive: '1'
      };
    },
    methods: {
      // 节点单击事件
      unitNodeClick(data, col) {
        if (col.label !== '操作') {
          this.$refs.userTable.queryParams.deptId = data.deptId;
          this.$refs.userTable.getList();

          this.$refs.unitTable.setData(data);

          this.$refs.projectTable.queryParams.providerId = data.deptId;
          this.$refs.projectTable.getList();
        }
      }
    }
  };
</script>
